<template>
  <div>
    <div class="contanier_box">
      <p>
        百位 至少选择
        <span>1</span>个 数字
      </p>
      <ul>
        <li
          v-for="(item,index) in list"
          :key="index"
          @click="handchangeTTOR($event,index)"
          :class="index==Tenthousand ? 'active':''"
        >{{item}}</li>
      </ul>
    </div>
    <div class="contanier_box">
      <p>
        十位 至少选择
        <span>1</span>个 数字
      </p>
      <ul>
        <li
          v-for="(item,index) in list"
          :key="index"
          @click="handchangeTOR($event,index)"
          :class="index==thousand ? 'active':''"
        >{{item}}</li>
      </ul>
    </div>
    <div class="contanier_box">
      <p>
        个位 至少选择
        <span>1</span>个 数字
      </p>
      <ul>
        <li
          v-for="(item,index) in list"
          :key="index"
          @click="handchangeHOR($event,index)"
          :class="index==hundred ? 'active':''"
        >{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "changeListDirectFive",
  data() {
    return {
      list: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      Tenthousand: "", //百
      hundred: "", //个位
      thousand: "", //十
      arr: [],
    };
  },

  methods: {
    handchangeTTOR(e, index) {
      this.Tenthousand = "";
      this.Tenthousand = e.target.innerHTML;
    },
    handchangeTOR(e, index) {
      this.thousand = "";
      this.thousand = e.target.innerHTML;
    },

    handchangeHOR(e, index) {
      this.hundred = "";
      this.hundred = e.target.innerHTML;      
    },
  },

};
</script>

<style scoped>
.active {
  color: #fff !important;
  background: #f84848 !important;
  border: 0.01rem solid #f84848 !important;
}
.contanier_box {
  padding: 0.1rem 0;
}
.contanier_box p {
  line-height: 0.2rem;
  text-indent: 0.35rem;
  font-size: 0.12rem;
  font-weight: 500;
  color: rgba(153, 153, 153, 1);
  position: relative;
}
.contanier_box p::before {
  content: "";
  width: 0.1rem;
  height: 0.1rem;
  background: #f25149;
  border-radius: 50%;
  position: absolute;
  left: 0.15rem;
  top: 0.03rem;
}
.contanier_box ul {
  display: flex;
  flex-wrap: wrap;
}
.contanier_box ul li {
  width: 0.4rem;
  height: 0.4rem;
  font-size: 0.18rem;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  color: #f84848;
  line-height: 0.4rem;
  text-align: center;
  margin: 0.08rem;
}
</style>